<template>
  <div
    :class="{
      'web-container': deviceType == 'web',
      'mobile-container': deviceType == 'mobile',
      'ipad-container': deviceType == 'ipad',
    }"
  >
    <!-- 版心 -->
    <div class="red" v-if="deviceType == 'mobile'"></div>

    <div class="pageArea">
      <!-- 关于我们 -->
      <div class="section">
        <div class="section_content">
          <div class="userBox">
            <!-- 左侧菜单栏 -->
            <div class="leftMenu">
              <div class="topUser">
                <div class="avatar">
                  <el-avatar
                    :size="avatarSize"
                    src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
                  ></el-avatar>
                </div>
                <div class="UserMsg" @click="changeMsg()">
                  賬號管理
                  <i class="el-icon-edit"></i>
                </div>
              </div>
              <div class="bottomVip">
                <div
                  class="vipItem"
                  v-for="(item, index) in navbarList"
                  :key="index"
                  @click="change(item, index)"
                  v-if="deviceType == 'web' || deviceType == 'ipad'"
                >
                  {{ item.name }}
                </div>

                <!-- 移动端tab栏 -->
                <div
                  :class="currindex == index ? 'activeVipItem' : 'vipItem'"
                  v-for="(item, index) in navbarList"
                  :key="index"
                  @click="change(item, index)"
                  v-if="deviceType == 'mobile'"
                >
                  {{ item.name }}
                </div>
              </div>
            </div>
            <!-- 右侧展示区域 -->
            <div class="rightMsg">
              <!-- 个人信息 -->
              <div class="userMsg" v-if="boxModle && currindex == 2">
                <div class="msgBox">
                  <div class="msgBoxItem" v-for="(item, index) in userinfo">
                  <div class="itemBox">
                    <div class="msgTitle">
                      {{ item.title }}
                    </div>
                    
                    <el-input v-model="input" :placeholder=item.num></el-input>
                  </div>
                </div>
                </div>
                <div class="submit">完成</div>
              </div>

              <!-- 会员等级 -->
              <div class="msgItem" v-if="currindex == 0">
                <div class="firstItem" v-for="(item, index) in passList">
                  <div class="left">
                    <div class="pageH3">{{ item.title }}</div>
                    <div class="pageH4">{{ item.content }}</div>
                  </div>
                  <div class="right">
                    <el-image
                      style="width: 100%; height: 100%"
                      :src="item.iconUrl"
                      fit="cover"
                    ></el-image>
                  </div>
                </div>
              </div>

              <!-- 会员充值 -->
              <div class="moneyItem" v-if="currindex == 1">
                <div class="pageH3">選擇充值類型</div>
                <div class="type">
                  <div class="typeItem" v-for="(item, index) in moneyList">
                    <div class="typeName">
                      <p>{{ item.title }}</p>
                    </div>
                    <div class="typeMoney">
                      <div class="top">
                        <div class="money">
                          {{ item.much }}<span>{{ item.jidu }}</span>
                        </div>
                      </div>
                      <div class="bottom">{{ item.yuanjia }}</div>
                    </div>
                  </div>
                </div>

                <div class="pageH3">選擇支付方式付款</div>
                <div class="pay">
                  <div
                    class="payItem"
                    v-for="(item, index) in payList"
                    :key="index"
                  >
                    <div class="er"></div>
                    <div class="payTitle">{{ item.name }}</div>
                  </div>
                </div>

                <div class="pageH3">充值說明</div>
                <div class="explain">
                  <div
                    class="explainItem"
                    v-for="(item, index) in shuoList"
                    :key="index"
                  >
                    {{ item.text }}
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
  
  <script>
export default {
  name: "Center",
  data() {
    return {
      headerUrl: require("@/assets/images/center/header.png"),
      avatarSize: 140,
      input:'',
      currindex: 0,
      boxModle:true,
      navbarList: [
        {
          name: "會員等級",
        },
        {
          name: "會員充值",
        },
      ],

      userinfo: [
        {
          title: "用戶名稱",
          num: "254345445354375",
        },
        {
          title: "賬號",
          num: "254345445354375",
        },
        {
          title: "密碼",
          num: "254345445354375",
        },
        {
          title: "信箱",
          num: "254345445354375",
        },
        {
          title: "通訊地址",
          num: "通訊地址",
        },
      ],

      passList: [
        {
          title: "賬號管理",
          content: "輕鬆管理您的賬號，安全掌控每一刻",
          iconUrl: require("@/assets/images/center/icon_01.png"),
        },
        {
          title: "持有產品與服務",
          content: "体验我们的产品与服务，让生活更便捷、更精彩。",
          iconUrl: require("@/assets/images/center/icon_02.png"),
        },
        {
          title: "交易記錄",
          content: "清晰记录每一次交易，让您的财务状况一目了然。",
          iconUrl: require("@/assets/images/center/icon_03.png"),
        },
        {
          title: "客服中心",
          content: "您的满意是我们的追求，客服中心随时为您解答疑问。",
          iconUrl: require("@/assets/images/center/icon_04.png"),
        },
      ],

      moneyList: [
        {
          title: "連 續 包 月",
          much: "99",
          jidu: "元/季",
          yuanjia: "159/季",
        },
        {
          title: "連 續 包 月",
          much: "99",
          jidu: "元/季",
          yuanjia: "159/季",
        },
        {
          title: "連 續 包 月",
          much: "99",
          jidu: "元/季",
          yuanjia: "159/季",
        },
      ],

      payList: [
        {
          erUrl: "",
          name: "微信支付",
        },
        {
          erUrl: "",
          name: "支付寶支付",
        },
      ],

      shuoList: [
        {
          text: "*這里是充值說明文案，這里是充值說明文案這里是充值說明文案這里是充值說明文案這里是充值說明文案這里是充值說明文案這里是充值說明",
        },
        {
          text: "*這里是充值說明文案，這里是充值說明文案這里是充值說明文案這里是充值說明文案這里是充值說明文案這里是充值說明文案這里是充值說明",
        },
        {
          text: "*這里是充值說明文案，這里是充值說明文案這里是充值說明文案這里是充值說明文案這里是充值說明文案這里是充值說明文案這里是充值說明",
        },
        {
          text: "*這里是充值說明文案，這里是充值說明文案這里是充值說明文案這里是充值說明文案這里是充值說明文案這里是充值說明文案這里是充值說明",
        },
        {
          text: "*這里是充值說明文案，這里是充值說明文案這里是充值說明文案這里是充值說明文案這里是充值說明文案這里是充值說明文案這里是充值說明",
        },
      ],
    };
  },
  created() {
    this.checkSize();
  },

  methods: {
    checkSize() {
      if (this.deviceType == "web" || this.deviceType == "ipad") {
        this.avatarSize = 140;
        this.boxModle = true
      } else {
        this.avatarSize = 60;
        this.boxModle = false
      }
    },

    // 个人信息修改
    changeMsg() {
      if(this.eviceType == 'web'|| this.deviceType == 'ipad'){
        this.currindex = 2;
      }else{
        this.$router.push({name:'Management'})
      }
    },

    change(item, index) {
      this.currindex = index;
      console.log(this.currindex)
    },
  },
};
</script>
  
  <style lang="scss" scoped>
@import "~@/assets/viewCss/center/center.scss";
</style>